<%@page language="java" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/tld/c.tld" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>拼车信息发布</title>
		<script type="text/javascript"
			src="http://api.map.baidu.com/api?v=1.3"></script>
		<script type="text/javascript"
			src="../../resources/js/reference/jquery-1.7.1.min.js"></script>
		<script type="text/javascript"
			src="../../resources/js/local/passagerInformationRelease.js"></script>
	</head>
	<body>
		<form id="informationRelease" action="InformationRelease.do"
			method="post">
			<div id="segment1">
				<div style="width: 520px; height: 340px; border: 1px solid gray"
					id="departureContainer">
				</div>
				<div>
					出发地信息
					<table>
						<tr>
							<td>
								省份
								<br>
							</td>
							<td>
								<input type="text" name="dep_province" value="" readOnly
									id="dep_province" />
								<br>
							</td>
						</tr>
						<tr>
							<td>
								城市
								<br>
							</td>
							<td>
								<input type="text" name="dep_city" value="" readOnly
									id="dep_city" />
								<br>
							</td>
						</tr>
						<tr>
							<td>
								区县
								<br>
							</td>
							<td>
								<input type="text" name="dep_district" value="" readOnly
									id="dep_district" />
								<br>
							</td>
						</tr>
						<tr>
							<td>
								街道
								<br>
							</td>
							<td>
								<input type="text" name="dep_street" value="" readOnly
									id="dep_street" />
								<br>
							</td>
						</tr>
						<tr>
							<td>
								门牌号
								<br>
							</td>
							<td>
								<input type="text" name="dep_streetNumber" value="" readOnly
									id="dep_streetNumber" />
								<input type="hidden" name="dep_x" value="" id="dep_x" />
								<input type="hidden" name="dep_y" value="" id="dep_y" />
								<br>
							</td>
						</tr>
						<tr>
							<td>
								出发点名称：
							</td>
							<td>
								<input type="text" name="dep_pointName" value="" id="dep_pointName"/>
							</td>
						</tr>
					</table>
				</div>
				<div>
					<a href="#" name="step2"> 下一步 </a>
				</div>
			</div>

			<div id="segment2" style="display: none">
				<div style="width: 520px; height: 340px; border: 1px solid gray"
					id="destinationContainer">
				</div>
				<div>
					目的地信息
					<table>
						<tr>
							<td>
								省份
								<br>
								<br>
							</td>
							<td>
								<input type="text" name="des_province" value="" readOnly
									id="des_province" />
								<br>
								<br>
							</td>
						</tr>
						<tr>
							<td>
								城市
								<br>
								<br>
							</td>
							<td>
								<input type="text" name="des_city" value="" readOnly
									id="des_city" />
								<br>
								<br>
							</td>
						</tr>
						<tr>
							<td>
								区县
								<br>
								<br>
							</td>
							<td>
								<input type="text" name="des_district" value="" readOnly
									id="des_district" />
								<br>
								<br>
							</td>
						</tr>
						<tr>
							<td>
								街道
								<br>
								<br>
							</td>
							<td>
								<input type="text" name="des_street" value="" readOnly
									id="des_street" />
								<br>
								<br>
							</td>
						</tr>
						<tr>
							<td>
								门牌号
								<br>
							</td>
							<td>
								<input type="text" name="des_streetNumber" value="" readOnly
									id="des_streetNumber" />
								<input type="hidden" name="des_x" value="" id="des_x" />
								<input type="hidden" name="des_y" value="" id="des_y" />
								<br>
							</td>
						</tr>
						<tr>
							<td>
								终点名称：
							</td>
							<td>
								<input type="text" name="des_pointName" value="" id="des_pointName"/>
							</td>
						</tr>
					</table>
				</div>
				<div>
					<a href="#" name="step1"> 上一步 </a>
					<a href="#" name="step3"> 下一步 </a>
				</div>
			</div>

			<div id="segment3" style="display: none">
				<table>
					<tr>
						<td>
							说明：
						</td>
						<td>
							<input type="text" value="" id="memo" name="memo" />
						</td>
					</tr>
					<tr>
						<td>
							出发时间：
						</td>
						<td>

						</td>
					</tr>
					<tr>
						<td>
							人数：
						</td>
						<td>
							<input type="text" value="" id="bookSeatNumber" name="bookSeatNumber"/>
						</td>
					</tr>
					<tr>
						<td>
							价格
						</td>
						<td>
							<input type="text" value="" id="price" name="price" />
						</td>
					</tr>
				</table>
				<a href="#" name="step2"> 上一步 </a>
				<input type="submit" value="提交" />
			</div>
		</form>
	</body>
</html>
<script type="text/javascript">
	//出发地地图
	var departureMap = new BMap.Map("departureContainer");
	departureMap.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
	departureMap.addControl(new BMap.NavigationControl());
	departureMap.addControl(new BMap.ScaleControl());
	departureMap.addControl(new BMap.OverviewMapControl());
	departureMap.enableScrollWheelZoom();

	function departureIPAddress(result) {
		var cityName = result.name;
		departureMap.setCenter(cityName);
	}

	var departureCity = new BMap.LocalCity();
	departureCity.get(departureIPAddress);

	var departureGC = new BMap.Geocoder();
	departureMap
			.addEventListener(
					"click",
					function(e) {
						var point = e.point;
						departureGC
								.getLocation(
										point,
										function(rs) {
											var addComp = rs.addressComponents;
											if (confirm(addComp.province + ", "
													+ addComp.city + ", "
													+ addComp.district + ", "
													+ addComp.street + ", "
													+ addComp.streetNumber)) {
												departureMap.clearOverlays();
												departureMap
														.addOverlay(new BMap.Marker(
																point));
												document
														.getElementById('dep_province').value = addComp.province;
												document
														.getElementById('dep_city').value = addComp.city;
												document
														.getElementById('dep_district').value = addComp.district;
												document
														.getElementById('dep_street').value = addComp.street;
												document
														.getElementById('dep_streetNumber').value = addComp.streetNumber;
												document.getElementById('dep_x').value=point.lng;
												document.getElementById('dep_y').value=point.lat;
											}
										});
					});

	//目的地地图
	var destinationMap = new BMap.Map("destinationContainer");
	destinationMap.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
	destinationMap.addControl(new BMap.NavigationControl());
	destinationMap.addControl(new BMap.ScaleControl());
	destinationMap.addControl(new BMap.OverviewMapControl());
	destinationMap.enableScrollWheelZoom();

	function destinationIPAddress(result) {
		var cityName = result.name;
		destinationMap.setCenter(cityName);
	}

	var distinationCity = new BMap.LocalCity();
	distinationCity.get(destinationIPAddress);

	var distinationGC = new BMap.Geocoder();
	destinationMap
			.addEventListener(
					"click",
					function(e) {
						var point = e.point;
						distinationGC
								.getLocation(
										point,
										function(rs) {
											var addComp = rs.addressComponents;
											if (confirm(addComp.province + ", "
													+ addComp.city + ", "
													+ addComp.district + ", "
													+ addComp.street + ", "
													+ addComp.streetNumber)) {
												destinationMap.clearOverlays();
												destinationMap
														.addOverlay(new BMap.Marker(
																point));
												document
														.getElementById('des_province').value = addComp.province;
												document
														.getElementById('des_city').value = addComp.city;
												document
														.getElementById('des_district').value = addComp.district;
												document
														.getElementById('des_street').value = addComp.street;
												document
														.getElementById('des_streetNumber').value = addComp.streetNumber;
												document.getElementById('des_x').value=point.lng;
												document.getElementById('des_y').value=point.lat;
											}
										});
					});
</script>